<template>
	<div class="">
		<Modal :value="voice" @on-visible-change="onChangeVisible" :closable="false" footer-hide :z-index="900"
			:width="675">
			<div class="voice">
				<div class="voice_top">
					<div class="voice_top_name">
						对讲
					</div>
					<img src="../../../../assets/new/voice_close.png" @click.stop="onChangeVisible(false)">
				</div>
				<div class="flex" style="justify-content: initial;">
					<div class="voice_search">
						<div class="voice_search_box">
							<Icon type="ios-search" size="24" color="#999" />
							<Input v-model="value" placeholder="请输入内容" style="width: 120px" :border="false" />
						</div>
						<Icon type="md-add" size="20" color="#999" class="cursor-pointer" @click.stop="teamType = true"/>
						<div class="voice-team" v-if="teamType">
							<div class="voice-team-close">
								<Icon type="md-close" size="20" color="#999" class="voice-team-close-icon cursor-pointer" @click.stop="teamType = false"/>
							</div>
							<div class="voice_team_list">
								<div class="voice_team_list_det">
									<div class="voice_team_list_det_name">
										<div class="choose_name" v-for="(item,k) in list" :key="k">
											<img src="../../../../assets/new/new_work_1.png" >
											<div class="choose_name_title">
												{{item.name}}
											</div>
											<Icon type="md-close" size="20" color="#999" class="cursor-pointer" @click.stop="spliceList(k)"/>
										</div>
									</div>
									<div class="voice_team_list_det_icon">
										<MyTreeSelect :value="searchMenuDetailDepart" clearable checked
											:data="personTreeData" search style="width:20px" class="m-r-5"
											@onCheckChange="onSelectChangeDepaTree">
											<Icon type="md-add" size="20" color="#999" class="cursor-pointer"/>
										</MyTreeSelect>
									</div>
								</div>
							</div>
							<div class="voice_team_btn">
								<div @click="addOrCancel(false)">
									取消
								</div>
								<div class="voice_team_btn_right" @click="addOrCancel(true)">
									确定
								</div>
							</div>
						</div>
					</div>
					<div class="voice_name">
						<div class="">
							可视环卫2小组
						</div>
						<Icon type="ios-create" size="20" />
					</div>
				</div>
				<div class="voice_list">
					<div class="voice_list_left">
						<div class="voice_list_left_title">
							暂无对讲
						</div>
						<div class="voice_list_left_add" @click.stop="teamType = true">
							去添加
						</div>
					</div>
					<!-- <div class="voice_list_left">
						<div class="voice_list_left_detail" v-for="(item,k) in 20" :key="k">
							<img src="../../../../assets/new/detail_people.png">
							<div class="voice_box">
								<div class="voice_box_line">
									<div class="voice_box_line_name">
										临时组
									</div>
									<div class="voice_box_line_time">
										16:40
									</div>
								</div>
								<div class="voice_box_line" style="margin-top: 10px;">
									<div class="">
										小明/小李...等12人
									</div>
									<div class="">

									</div>
								</div>
							</div>
						</div>
					</div> -->
					<div class="voice_list_right">
						<!-- 静音 -->
						<img src="../../../../assets/new/voice_ban.png" class="voice_list_right_img">
						<!-- <img src="../../../../assets/new/voice_solution.png"> -->
						
						<!-- 暂未接听 -->
						<div class="voice_hang" :class="{'popIn':voiceShow,'popInNot':voiceHide}">
							<div class="voice_hang_top">
								<div class="voice_hang_top_tip">
									温馨提示
								</div>
								<div class="voice_hang_top_title">
									{{titleTips[titleType]}}
								</div>
							</div>
							<div class="voice_hang_btn">
								<div v-if="titleType==1||titleType==5" @click.stop="closePop">
									取消
								</div>
								<div @click="closePop" v-if="titleType==2||titleType==3||titleType==4">
									确定
								</div>
								<div @click="launchVoice(1)" v-if="titleType==1||titleType==5">
									重新拨打
								</div>
							</div>
						</div>
						
						<div class="voice_list_right_list">
							<div class="voice_list_right_detail" v-for="(item,k) in 30" :key="k">
								<div class="voice_list_right_detail_img">
									<img src="../../../../assets/new/new_nav_2.png">
									<div class="voice_list_right_detail_post">
										移除
									</div>
									<div class="voice_list_right_detail_ani">
										<img src="../../../../assets/new/voice_loading.png" >
									</div>
								</div>
								<div style="margin: 8px 0 30px;">
									123
								</div>
								<img src="../../../../assets/new/voice_speak.png" class="voice_list_right_detail_speak">
							</div>
							<MyTreeSelect :value="searchMenuDetailDepart" clearable
								:data="personTreeData" search style="width:85px"
								@onSelectChange="onSelectChangeDepaTree">
								<div class="voice_list_right_detail cursor-pointer" style="width: 100%;">
									<div class="voice_list_right_detail_img">
										<img src="../../../../assets/new/voice_add.png">
									</div>
									<div style="margin: 8px 0 20px;">
										添加
									</div>
								</div>
							</MyTreeSelect>
							
						</div>
						<div class="header" style="margin-top: 10px;">
							<svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
								<defs>
									<path id="gentle-wave"
										d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
								</defs>
								<g class="parallax">
									<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
									<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
									<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
									<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
								</g>
							</svg>
						</div>
						<div class="voice_btn">
							<div class="voice_btn_box" @click="launchVoice">
								<img src="../../../../assets/new/voice_phone.png" >
								<div>
									发起会话
								</div>
							</div>
							<div class="voice_btn_box">
								<img src="../../../../assets/new/voice_phone.png" >
								<div>
									拨打电话
								</div>
							</div>
							<div class="voice_btn_box">
								<img src="../../../../assets/new/voice_HangUp.png" @click.stop="onHangUp">
							</div>
						</div>
					</div>
				</div>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import MyTreeSelect from '@/components/common/MyTreeSelect';
	export default {
		model: {
			prop: 'voice',
			event: 'onChange'
		},
		props: {
			voice: Boolean,
			trtcCalling: Object
		},
		components: {
			MyTreeSelect
		},
		data() {
			return {
				value: '',
				invite:false,
				teamType:false,
				searchMenuDetailDepartId:'',
				searchMenuDetailDepart:'',
				list:[],
				voiceShow:false,
				voiceHide:false,
				titleTips:[
					' ',
					'对方暂时无法接听，可尝试重新拨打。',
					'您已被移除对讲组。',
					'用户正在通话中',
					'通话请求超时',
					'用户拒绝通话'
				],
				titleType:0,
				ConOrHand:false
			}
		},
		computed: {
			...mapGetters({
				'account': 'getAccount',
				'departmentTreeArr': 'getDepartmentTreeList',
				'personTreeData': 'getUserTreeList',
				'workOrderLevelArr': 'getWorkOrderLevelAllList',
				'eventRemindTime': 'getEventRemindTime',
				'eventRemindNumber': 'getEventRemindNumber',
			})
		},
		// watch:{
		// 	voiceShow
		// },
		methods: {
			onChangeVisible(boo) {
				if (!boo) {
					this.list = []
					this.$emit('onChange', false)
					this.voiceShow = false
					this.voiceHide = false
				}
			},
			//删除选中人员
			spliceList(k){
				this.list.splice(k,1)
			},
			//取消或者添加（建群组、私聊或者取消）
			addOrCancel(type){
				if(type){
					// this.$http.createVoiceIntercomGroup({}).then((res)=>{
						
					// })
				}else{
					this.teamType = false
					this.list = []
				}
			},
			// 选择人员
			onSelectChangeDepaTree(section) {
				console.log(section)
				// if(section.type != 'user'){
				// 	return false
				// }
				// let length = this.list.filter(item=>item.id==section.id).length
				// if(length>0){
				// 	return false
				// }
				// this.list.push(section)
				// console.log(this.list)
				// this.searchMenuDetailDepartId = section.id
				// this.searchMenuDetailDepart = section.name
			},
			//发起对话
			launchVoice(type){
				this.voiceShow&&this.closePop()
				type==1&&this.closePop()
				if(this.ConOrHand){
					return false
				}
				this.ConOrHand = true//两端加锁,阻止再次点击
				this.$parent.ConOrHand = true//判断当前是否为发起端
				this.trtcCalling.call({
					userID:'456',
					type:1
				});
			},
			//关闭提醒弹窗
			closePop(){
				this.voiceShow = false
				this.voiceHide = true
				let time = setTimeout(()=>{
					clearTimeout(time)
					this.voiceHide = false
				},400)
			},
			//挂断对话
			onHangUp(){
				this.trtcCalling.hangup()
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.ivu-modal {
			top: 50%;
			margin-top: -363px;

			.ivu-modal-content {
				background-color: rgba(0, 0, 0, 0);
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

				.ivu-modal-body {
					background-color: rgba(0, 0, 0, 0);
					padding: 0;
				}
			}
		}

		.ivu-input {
			color: #FFFFFF;
			border: 0px;
			background-color: rgba(0, 0, 0, 0);
		}

		.ivu-icon-md-add {
			border: 1px solid #999999;
			border-radius: 50%;
		}
		.ivu-input:hover {
		    border-color: rgba(13,157,255,0);
		}
		.ivu-input:focus {
		    border-color: rgba(13,157,255,.8);
		    outline: 0;
		    box-shadow: 0 0 0 2px rgba(13,157,255,0);
		}
		.ivu-select-dropdown{
			text-align: left;
			background-color: rgba(0,0,0,0);
			background-image: url(../../../../assets/new/voice_search.png);
			background-size: 100% 100%;
		}
		.treeSelect .treeSelect-dropdown{
			background-color: rgba(0,0,0,0);
			padding-top: 8px;
		}
		.ivu-tree-title{
			color: #FFFFFF;
		}
		.ivu-tree-title:hover {
			color: rgba(13,157,255,.8);
		    background-color: #e9f8f5;
		}
		.ivu-tree-title-selected{
			color: rgba(13,157,255,.8);
		}
		.ivu-tree-arrow{
			color: #FFFFFF;
		}
		.icon-gongsi,.icon-jiaose{
			color: rgba(13,157,255,.8) !important;
		}
		.ivu-tree-empty{
			color: #999999;
			text-align: center;
			margin-top: 15px;
		}
		.ivu-checkbox-checked .ivu-checkbox-inner {
		    border-color: rgba(13,157,255,.8);
		    background-color: rgba(13,157,255,.8);
		}
		.treeSelect-tree{
			margin-top: 4px;
		}
		.treeSelect .treeSelect-dropdown .treeSelect-bottom{
			border-color: #20739E;
		}
		.ivu-btn-primary{
			background-color: #0D9DFF;
			border-color: #0D9DFF;
		}
	}

	.voice {
		width: 675px;
		height: 526px;
		background-image: url(../../../../assets/new/voice_img.png);
		background-size: 100% 100%;

		.voice_top {
			height: 52px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 6px 4px 0 45px;

			.voice_top_name {
				font-size: 16px;
				color: #FFFFFF;
				padding-top: 6px;
			}

			img {
				width: 86px;
				height: 50px;
				cursor: pointer;
			}
		}

		.voice_search {
			height: 40px;
			width: 220px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			margin-left: 4px;
			position: relative;

			.voice_search_box {
				width: 150px;
				height: 32px;
				// border: 1px solid #3A678D;
				// border-radius: 16px;
				display: flex;
				align-items: center;
			}
		}

		.voice_name {
			width: 400px;
			height: 40px;
			font-size: 14px;
			color: rgba(255, 255, 255, .8);
			margin-left: 20px;
			display: flex;
			align-items: center;
		}

		.voice_list {
			height: 400px;
			padding: 10px 0 0;
			margin: 9px 0;
			display: flex;
			align-items: center;

			.voice_list_left::-webkit-scrollbar {
				width: 5px;
			}

			.voice_list_left {
				width: 220px;
				height: 100%;
				margin-left: 4px;
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow: auto;

				.voice_list_left_title {
					font-size: 14px;
					color: #FFFFFF;
					margin: 40px 0 20px;
				}

				.voice_list_left_add {
					width: 68px;
					height: 32px;
					font-size: 14px;
					color: #FFFFFF;
					background-color: #66AFFF;
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
				}

				.voice_list_left_detail {
					width: 190px;
					height: 42px;
					margin: 0 10px 24px;
					display: flex;
					align-items: center;

					img {
						width: 42px;
						height: 42px;
						margin-right: 10px;
					}

					.voice_box {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.voice_box_line {
							font-size: 12px;
							color: #999999;
							line-height: 1;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.voice_box_line_name {
								font-size: 14px;
								color: #FFFFFF;
							}
						}
					}
				}

				.voice_list_left_detail:last-child {
					margin-bottom: 15px;
				}
			}

			.voice_list_right {
				width: 430px;
				height: 390px;
				margin-left: 10px;
				position: relative;
				.voice_list_right_img{
					width: 30px;
					height: 30px;
					position: absolute;
					right: 26px;
					bottom: 20px;
				}
				
				.voice_hang{
					width: 280px;
					height: 160px;
					background: #FFFFFF;
					border-radius: 10px;
					position: absolute;
					left: 50%;
					top: 50%;
					margin-left: -140px;
					margin-top: -130px;
					z-index: 99;
					display: none;
					.voice_hang_top{
						height: 111px;
						font-size: 18px;
						color: #333333;
						font-weight: 500;
						border-bottom: 1px solid rgba(102,102,102,.3);
						text-align: center;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.voice_hang_top_tip{
							padding-top: 16px;
						}
						.voice_hang_top_title{
							width: 210px;
							font-size: 15px;
							margin: 0 auto;
						}
					}
					.voice_hang_btn{
						height: 48px;
						font-size: 16px;
						color: #333333;
						font-weight: 500;
						display: flex;
						align-items: center;
						div{
							height: 48px;
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: center;
							cursor: pointer;
						}
						div:last-child{
							color: #04B5F8;
							border-left: 1px solid rgba(102,102,102,.3);
						}
					}
				}

				.voice_list_right_list::-webkit-scrollbar {
					width: 5px;
				}

				.voice_list_right_list {
					height: 250px;
					display: flex;
					flex-wrap: wrap;
					overflow: auto;

					.voice_list_right_detail {
						width: 20%;
						font-size: 14px;
						color: #FFFFFF;
						line-height: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;
						
						.voice_list_right_detail_speak{
							width: 16px;
							height: 16px;
							position: absolute;
							left: 50%;
							bottom: 10px;
							margin-left: -8px;
						}

						.voice_list_right_detail_img {
							width: 42px;
							height: 42px;
							position: relative;

							img {
								width: 42px;
								height: 42px;
							}

							.voice_list_right_detail_post {
								width: 42px;
								height: 42px;
								font-size: 12px;
								color: #FFFFFF;
								border-radius: 21px;
								background-color: rgba(0, 186, 255, .5);
								display: flex;
								align-items: center;
								justify-content: center;
								position: absolute;
								left: 0;
								top: 0;
								opacity: 0;
							}
							.voice_list_right_detail_ani{
								width: 42px;
								height: 42px;
								background-color: rgba(0, 186, 255, .5);
								border-radius: 21px;
								display: flex;
								align-items: center;
								justify-content: center;
								position: absolute;
								left: 0;
								top: 0;
								img{
									width: 26px;
									height: 26px;
									animation: run 4s linear 0s infinite;
								}
							}
						}

						.voice_list_right_detail_img:hover {
							.voice_list_right_detail_post {
								opacity: 1;
								cursor: pointer;
							}
						}
					}
				}
				
				.voice_btn{
					display: flex;
					align-items: center;
					justify-content: center;
					.voice_btn_box{
						text-align: center;
						margin: 15px 0 0 40px;
						img{
							width: 37px;
							height: 37px;
							margin-bottom: 6px;
						}
						div{
							font-size: 14px;
							line-height: 1;
							color: #02B8FC;
						}
					}
					.voice_btn_box:first-child{
						margin-left: 0;
					}
				}
			}
		}
	}
	
	.voice-team{
		width: 350px;
		height: 171px;
		background-image: url(../../../../assets/new/voice_team.png);
		background-size: 100% 100%;
		position: absolute;
		top: -1px;
		right: -355px;
		z-index: 9;
		.voice-team-close{
			text-align: right;
			.voice-team-close-icon{
				border: 1px solid #999;
				border-radius: 50%;
				margin: 10px 10px 0 0;
			}
		}
		.voice_team_list{
			display: flex;
			padding-top: 10px;
			.voice_team_list_det{
				flex: 1;
				height: 70px;
				border: 1px solid #20739E;
				box-shadow: 0px 0px 19px 1px rgba(51, 102, 255, 0.35);
				border-radius: 4px;
				margin: 0 10px 16px;
				text-align: right;
				display: flex;
				.voice_team_list_det_name::-webkit-scrollbar{
					width: 5px;
				}
				.voice_team_list_det_name{
					height: 70px;
					overflow: auto;
					padding-bottom: 6px;
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					.choose_name{
						height: 24px;
						color: #999999;
						border-radius: 14px;
						background-color: rgba(100,100,100,.5);
						// padding: 0 10px;
						display: inline-flex;
						align-items: center;
						padding-right: 4px;
						margin: 6px 0 0 6px;
						img{
							width: 24px;
							height: 24px;
						}
						.choose_name_title{
							font-size: 14px;
							margin-left: 2px;
						}
					}
				}
				.voice_team_list_det_icon{
					margin: 10px 10px 0 5px;
				}
			}
		}
		.voice_team_btn{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			div{
				width: 52px;
				height: 30px;
				font-size: 14px;
				color: #333333;
				font-weight: bold;
				border-radius: 6px;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.voice_team_btn_right{
				background-color: #0D9DFF;
				color: #FFFFFF;
				margin: 0 25px 0 20px;
			}
		}
	}
	
	@keyframes run{
		from{
			transform: rotate(0deg);
		}
		to{
			transform: rotate(360deg);
		}
	}
	
	.header {
	  position:relative;
	  text-align:center;
	  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
	  color:white;
	}
	
	// .inner-header {
	//   height:65vh;
	//   width:100%;
	//   margin: 0;
	//   padding: 0;
	// }
	
	.flex { /*Flexbox for containers*/
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  text-align: center;
	}
	
	.waves {
	  position:relative;
	  width: 100%;
	  height:5vh;
	  margin-bottom:-7px; /*Fix for safari gap*/
	  min-height:30px;
	  max-height:60px;
	}
	
	.content {
	  position:relative;
	  height:10vh;
	  text-align:center;
	  background-color: white;
	}
	
	/* Animation */
	
	.parallax > use {
	  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
	}
	.parallax > use:nth-child(1) {
	  animation-delay: -2s;
	  animation-duration: 7s;
	}
	.parallax > use:nth-child(2) {
	  animation-delay: -3s;
	  animation-duration: 10s;
	}
	.parallax > use:nth-child(3) {
	  animation-delay: -4s;
	  animation-duration: 13s;
	}
	.parallax > use:nth-child(4) {
	  animation-delay: -5s;
	  animation-duration: 20s;
	}
	@keyframes move-forever {
	  0% {
	   transform: translate3d(-90px,0,0);
	  }
	  100% { 
	    transform: translate3d(85px,0,0);
	  }
	}
	/*Shrinking for mobile*/
	@media (max-width: 768px) {
	  .waves {
	    height:40px;
	    min-height:40px;
	  }
	  .content {
	    height:10vh;
	  }
	  h1 {
	    font-size:24px;
	  }
	}
	
	        /*弹层动画（从上往下）*/
	
	.fadeIn {
	    -webkit-animation: fadeInDown .3s;
	    animation: fadeInDown .3s;
	}
	
	@keyframes fadeInDown {
	    0% {
	        -webkit-transform: translate3d(0, -20%, 0);
	        -webkit-transform: translate3d(0, -20%, 0);
	        transform: translate3d(0, -20%, 0);
	        transform: translate3d(0, -20%, 0);
	        opacity: 0;
	    }
	    100% {
	        -webkit-transform: none;
	        transform: none;
	        opacity: 1;
	    }
	}
	
	@-webkit-keyframes fadeInDown {
	    0% {
	        -webkit-transform: translate3d(0, -20%, 0);
	        opacity: 0;
	    }
	    100% {
	        -webkit-transform: none;
	        opacity: 1;
	    }
	}
	
	
	/*弹层动画（从下往上）*/
	
	.fadelogIn {
	    -webkit-animation: fadelogIn .4s;
	    animation: fadelogIn .4s;
	}
	
	@keyframes fadelogIn {
	    0% {
	        -webkit-transform: translate3d(0, 100%, 0);
	        -webkit-transform: translate3d(0, 100%, 0);
	        transform: translate3d(0, 100%, 0);
	        transform: translate3d(0, 100%, 0);
	    }
	    100% {
	        -webkit-transform: none;
	        transform: none;
	    }
	}
	
	@-webkit-keyframes fadelogIn {
	    0% {
	        -webkit-transform: translate3d(0, 100%, 0);
	    }
	    100% {
	        -webkit-transform: none;
	    }
	}
	
	
	/*弹层动画（从右往左）*/
	
	.fadeleftIn {
	    -webkit-animation: fadeleftIn .4s;
	    animation: fadeleftIn .4s;
	}
	
	
	@-webkit-keyframes fadeleftIn {
	    0% {
	        -webkit-transform: translate3d(100%, 0, 0);
	    }
	    100% {
	        -webkit-transform: none;
	    }
	}
	
	
	/*弹层动画（放大）*/
	
	.popIn {
		display: block !important;
	    animation: fadeleftIn .4s;
	    animation-name: popIn;
	}
	
	@keyframes popIn {
	    0% {
	        transform: scale3d(0.5, 0.5, 0.5);
	        opacity: 0;
	    }
	    50% {
	        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
	    }
	    100% {
	        transform: scale3d(1, 1, 1);
	        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	        opacity: 1;
	    }
	}
	@keyframes fadeleftIn {
	    0% {
	        transform: translate3d(100%, 0, 0);
	    }
	    100% {
	        transform: none;
	    }
	}
	
	.popInNot {
		display: block !important;
	    animation: fadeleftInNot .4s;
	    animation-name: popInNot;
		animation-fill-mode:forwards;
	}
	
	@keyframes popInNot {
	    0% {
			transform: scale3d(1, 1, 1);
			animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
			opacity: 1;
	    }
	    50% {
	        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
	    }
	    100% {
	        transform: scale3d(0.5, 0.5, 0.5);
	        opacity: 0;
	    }
	}
	@keyframes fadeleftInNot {
	    0% {
			transform: none;
	    }
	    100% {
	        transform: translate3d(100%, 0, 0);
	    }
	}
</style>
